<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <v-breadcrumbs :items="breadcrumbs">
      <template v-slot:divider>
        <v-icon>forward</v-icon>
      </template>
    </v-breadcrumbs>
    <v-container fluid fill-height grid-list-md>
      <v-layout row wrap>
        <v-flex xs12>
          <v-tabs v-model="tabActive" dark color="blue lighten-1" slider-color="yellow">
            <v-tab v-for="item in consultType" :key="item.name" ripple>{{item.name}}</v-tab>
            <v-tab-item v-for="(item,index) in consultType" :key="item.name">
              <v-card flat color="white">
                <v-card-title primary class="headline">
                  <v-layout justify-space-between align-center>
                    <div class="headline">{{item.name}}</div>
                    <v-btn flat icon @click="edit(index)">
                      <v-icon dark>edit</v-icon>
                    </v-btn>
                  </v-layout>
                </v-card-title>
                <v-card-text>
                  <div class="upload-list">
                    <v-img :src="item.picUrl" aspect-ratio="1" class="grey lighten-2" contain/>
                  </div>
                  <v-divider class="mt-1"/>
                  <div class="mt-4 title">介绍</div>
                  <div>{{item.introduction}}</div>
                  <v-divider class="mt-1"/>
                  <div class="mt-4 title">标签</div>
                  <div class="mt-1">
                    <v-chip v-for="(subItem,index) in item.label" v-bind:key="index">{{subItem}}</v-chip>
                  </div>
                  <v-divider class="mt-1"/>
                </v-card-text>
              </v-card>
            </v-tab-item>
          </v-tabs>
        </v-flex>
      </v-layout>
    </v-container>
    <v-dialog v-model="dialog.visible" max-width="600px">
      <v-card>
        <v-card-title>
          <span class="headline">{{dialog.title}}</span>
        </v-card-title>
        <v-card-text>
          <v-form ref="form" v-model="valid" lazy-validation>
            <v-container>
              <v-layout wrap>
                <uploader class="ml-1" base="consult/" ref="picUploader" refs="picUploader" title="图片上传" :max="1" :pic="true">
                  <template slot-scope="props">
                    <div class="upload-list">
                      <v-img :src="props.url" aspect-ratio="1" class="grey lighten-2" contain/>
                      <div style="flex-direction: column;" class="upload-list-hover d-flex" v-if="props.tool">
                        <div class="d-flex justify-space-between mt-3">
                          <v-icon class="font-white" @click="$refs[props.refs].left(props.index)">arrow_left</v-icon>
                          <v-icon class="font-white" @click="$refs[props.refs].right(props.index)">arrow_right</v-icon>
                        </div>
                        <div class="d-flex justify-space-between">
                          <v-icon class="font-white" @click="$refs[props.refs].upload(props.index)">refresh</v-icon>
                          <v-icon class="font-white" @click="$refs[props.refs].delete(props.index)">delete</v-icon>
                        </div>
                      </div>
                      <div style="flex-direction: column;" class="upload-list-hover align-center d-flex" v-if="props.progressVisible">
                        <v-progress-circular :rotate="-90" :size="100" :width="15" :value="props.progress" color="primary">{{ props.progress }}</v-progress-circular>
                      </div>
                    </div>
                  </template>
                  <div class="upload-list d-flex align-center" slot="add" slot-scope="props">
                    <v-icon style="font-size: 80px" @click="$refs[props.refs].upload(props.length)">add</v-icon>
                  </div>
                </uploader>
                <v-flex xs12>
                  <v-textarea :rules="rule.introduction" v-model="dialog.data.introduction" auto-grow label="介绍" rows="1"></v-textarea>
                </v-flex>
                <v-flex xs12>
                  <label-c v-model="dialog.data.label"></label-c>
                </v-flex>
              </v-layout>
            </v-container>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="dialog.visible=false">关闭</v-btn>
          <v-btn color="blue darken-1" flat @click="postConsultType()">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { getConsult, postConsultType } from '../../api/consult'
import labelC from './Label'
import uploader from '../../components/Uploader'
import { Error } from '../../utils/error'
export default {
  name: 'Type',
  components: {
    labelC,
    uploader
  },
  data: () => ({
    breadcrumbs: [
      {
        text: '咨询',
        disabled: true
      },
      {
        text: '类型',
        disabled: true
      }
    ],
    tabActive: null,
    consultType: [],
    dialog: {
      visible: false,
      title: '',
      data: {
        label: [],
        introduction: '',
        id: ''
      },
      index: ''
    },
    valid: true,
    rule: {
      introduction: [v => !!v || '介绍必须填写', v => (v && v.length <= 255) || '介绍不能超过255个字符']
    }
  }),
  methods: {
    getConsult () {
      getConsult().then((res) => {
        this.consultType = res.data.data
        for (let i = 0; i < this.consultType.length; i++) {
          this.consultType[i].label = this.consultType[i].label.split(' ')
        }
      })
    },
    edit (index) {
      this.dialog.data.label = []
      for (let i = 0; i < this.consultType[index].label.length; i++) {
        this.dialog.data.label.push(this.consultType[index].label[i])
      }
      this.dialog.title = this.consultType[index].name
      this.dialog.data.introduction = this.consultType[index].introduction
      this.dialog.index = index
      this.dialog.visible = true
      this.$refs.picUploader.fileList = []
      this.$refs.picUploader.fileList.push({
        src: this.consultType[index].picUrl,
        toolVisible: false,
        progressVisible: false,
        progress: 0
      })
    },
    postConsultType () {
      if (!this.$refs.form.validate()) {
        return
      } else if (this.$refs.picUploader.fileList.length === 0) {
        Error(5000, '未上传图片')
        return
      }
      let label = ''
      for (let i = 0; i < this.dialog.data.label.length; i++) {
        label += this.dialog.data.label[i] + ' '
      }
      label = label.substring(0, label.length - 1)
      let data = {
        id: this.consultType[this.dialog.index].id,
        introduction: this.dialog.data.introduction,
        label: label,
        picUrl: this.$refs.picUploader.fileList[0].src
      }
      postConsultType(data).then((res) => {
        this.dialog.visible = false
        this.getConsult()
      })
    }
  },
  mounted () {
    this.getConsult()
  }
}
</script>

<style scoped>
@import "../style/common.css";
</style>
